<script setup lang="tsx">
import { activeDetailsApi } from '@/api/Activity'
import { ActiveStateDict, VerifyMethodDict } from '@/utils/dict'
const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
})

const detail = ref<any>({})

const getDetail = async () => {
  const res = await activeDetailsApi(props.id)
  console.log(res)
  detail.value = res.data
}
getDetail()
console.log(detail.value)
</script>

<template>
  <div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">活动编号：{{ detail.activeNo }}</div>
      <div class="flex-[50%] px-5">活动状态：{{ ActiveStateDict[detail.activeState] }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">活动名称：{{ detail.activeTitle }}</div>
      <div class="flex-[50%] px-5"></div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>活动起止时间：</span>
        <span v-if="detail.startTime">{{ detail.startTime }}至<br />{{ detail.endTime }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>活动有效时间：</span>
        <span v-if="detail.validStartTime">
          {{ detail.validStartTime }}至<br />{{ detail.validEndTime }}
        </span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>报名次数限制：</span>
        <span>{{ detail.limitEnrollNum }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>划线价格：</span>
        <span>{{ detail.originPrice }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>报名价格：</span>
        <!-- {{ detail.activeStepPrices.length > 0 }} -->
        <div v-if="detail?.activeStepPrices?.length > 0">
          <div :key="item.activeId" v-for="item in detail.activeStepPrices">
            {{ item.enrollNum }}人 {{ item.enrollPrice?.toFixed(2) }}
          </div>
        </div>
        <div v-else>
          <div>{{ detail.enrollNum }}人 {{ detail.activePrice?.toFixed(2) }}</div>
        </div>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>已报名：</span>
        <span>{{ detail.enrolledNum }}人</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>核销方式：</span>
        <span>{{ VerifyMethodDict[detail.verifyMethod] }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span class="w-220px" v-if="detail?.activeEnrollInfos?.length > 0">报名信息：</span>
        <div v-if="detail?.activeEnrollInfos?.length > 0">
          <span class="mr-2" :key="item.id" v-for="item in detail.activeEnrollInfos">
            {{ item.title }}
          </span>
        </div>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>未满员自动退：</span>
        <span>{{ detail.noFullAutoRefundState === 1 ? '是' : '否' }}</span>
      </div>
      <div class="flex flex-[50%] px-5"></div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>活动地点：</span>
        <span>{{ detail.address }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>票付通活动：</span>
        <span>{{ detail.verifyType === 1 ? '是' : '否' }}</span>
      </div>
    </div>
    <div v-if="detail?.verifyType === 1" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>供应商ID：</span>
        <span>{{ detail.pftSupplier }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>票付通产品ID：</span>
        <span>{{ detail.pftProduct }}</span>
      </div>
    </div>
    <div v-if="detail?.verifyType === 1" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>票付通门票ID：</span>
        <span>{{ detail.pftTicket }}</span>
      </div>
      <div class="flex flex-[50%] px-5"></div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">联系信息</div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">联系电话：{{ detail.activeMobile }}</div>
      <div class="flex-[50%] px-5">客服微信号：{{ detail.activeWechat }}</div>
    </div>
  </div>
  <div v-if="!(detail.defaultCommissionType === 0 && !detail.otherEquity)">
    <div class="font-bold py-2">推广权益</div>
    <div class="flex text-14px py-2">
      <div v-if="detail.defaultCommissionType === 0" class="flex flex-[50%] px-5">
        <span>其他：</span>
        <span>{{ detail.otherEquity }}</span>
      </div>
      <div v-if="detail.defaultCommissionType === 1" class="flex flex-[50%] px-5">
        <span>佣金：</span>
        <span>{{ detail.commissionAmt }}</span>
      </div>
      <div v-if="detail.defaultCommissionType === 2" class="flex flex-[50%] px-5">
        <span>佣金比例：</span>
        <span>{{ detail.commissionRate }}%</span>
      </div>
    </div>
  </div>
  <div v-if="detail.activeRedPacket">
    <div class="font-bold py-2">活动红包</div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">红包金额：{{ detail.activeRedPacket?.firstRedPacketAmt }}</div>
      <div class="flex-[50%] px-5">红包数量：{{ detail.activeRedPacket?.redPacketNum }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">已领数量：{{ detail.activeRedPacket?.receiveNum }}</div>
      <div class="flex-[50%] px-5">已用数量：{{ detail.activeRedPacket?.useNum }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">有效期：{{ detail.activeRedPacket?.validDay }}天</div>
      <div class="flex-[50%] px-5"></div>
    </div>
  </div>
</template>
